//左侧菜单联动事件的匿名封装
(function Menu(goToMenu, addMenuClick) {
	/**
	 * 将菜单栏的最外面下来 li 里的 a 标签设置为 'JavaScript:;';
	 * 说明：防止影响网页 href 的锚记效果
	 */
	// $('#main-menu-navigation>li>a').each(function() {
	// 	this.href = 'JavaScript:';
	// });
	
	// 自动前往菜单页的首页
	goToMenu();
	// 对菜单栏添加事件并初始化联动
	addMenuClick();

})(
	function goToMenu() {

		/**
		 * 自动打开菜单页，只找到第一个匹配的然后退出遍历
		 * 说明：自动找到 href 相同的 a 标签，将上面的 li 标签添加 active 类样式
		 */
		$('a.menu-item').each(function() {
			if (this.href == window.document.location.href ||
				this.href + '#' == window.document.location.href) {
				$($(this).closest('li')).addClass('active');
				return false;
			}
		})

	},
	function addMenuClick() {
		// 获得顶部导航栏的 ul 节点
		let biaoqian = $('ul.data-biaoqian')[0];

		// 在循环遍历将菜单栏里的 a 标签设置点击事件
		// 用于初始化每个模块页面的首个面包削界面
		$('a.menu-item').each(function() {
			this.href = 'JavaScript:;';
			// 给 a 标签上添加点击事件
			$(this).on('click', function() {
				// -------------- 切换菜单样式的方法【↓开始】 --------------
				/**
				 * 最左侧菜单栏进行切换效果的 方法
				 * 并将上方标题栏显示的标题 active 也移除掉
				 */
				function qiehuan() {
					// 找到它的上级 li 标签
					let li = $(this).closest('li')[0];
					// 找到左侧菜单栏的最大 ul 标签节点
					let ul = $('#main-menu-navigation')[0];
					// 将之前的 li.active 移除掉 active
					$(ul).find('li.active').removeClass('active');
					// 对点击的 li 标签节点进行添加 active
					$(li).addClass('active');

					// 将顶部导航栏正在显示的 li active 类样式移除掉
					$(biaoqian).find('a.active').removeClass('active');
				}
				// 调用执行上面的方法 -> 启动监听器
				qiehuan.call(this);
				// -------------- 切换导航栏样式的方法【↑结束】 --------------

				// 取得 a 标签的 data-aName 自定义名称，各种使用
				let name = this.getAttribute('data-aName');
				// 取出 a 标签的显示标题的 text 去空格后的字段，用来创建导航栏标题时使用
				let titleName = $(this).text().trim();

				// -------------- 点击左侧菜单栏后 判断上方标题是否存在的连锁效应【↓开始】 -------------- 
				/**
				 * 在点击左侧菜单时 连续触发的连锁效应
				 * 思路分析
				 * 1. 判断上方导航栏是否存在，如果存在则进行切换样式
				 * 2. 并连续触发中间内容区的连锁，将对应的内容区也进行添加 active
				 * 3. 将最后的标记设置为 true，并结束该方法
				 * @param {Object} name 需要判断的 name，关键字
				 */
				function lianSuo(name) {
					// 最终结果的标记
					let boo = false;

					// 用 $() 数组的方式代替了 if 判断，如果存在则进行添加 active
					// 并对之前显示的 active 的 a 标签进行移除 active show 的类样式
					$('a#pills-' + name + '-tab').each(function() {
						// 数组存在数据则代表已创建过 标题栏 对应的标题，则直接添加类样式 active 
						$(this).addClass('active');

						// 调用清除的方法，传入中间主内容区的最大 div 节点
						// 进行移除所有的 active show 的 div
						qingchu($('div.content-wrapper')[0]);

						// 将对应的中间内容区 div 内容添加 active show 类样式
						$('#pills-' + name).addClass('active show');

						// 切换网址尾部的 hash 属性
						hash();

						// 将标题转换为 true，并结束遍历
						boo = true;
						return false;
					});

					// 返回最终结果
					return boo;
				}
				
				// 如果为 true，则存在，直接结束后续的创建步骤
				if (lianSuo(name)) {
					return false;
				}

				// -------------- 点击左侧菜单栏后 判断上方标题是否存在的连锁效应【↑结束】 --------------

				// -------------- 连锁效应 -> 创建新的 标题 li 节点【↓开始】 --------------
				function newLiBiaoTi() {
					// 创建一个标题栏的 li 节点模板字符串，并将 id 和左侧菜单栏进行绑定
					let liNode = $(`<li class=nav-item id=${name}>`)[0];
						// 对 li 节点对象中的 html 内容进行编辑
						// 1. 里面的 a 节点初始化为 active 显示
						// 2. 在标签左侧添加一个 button 的 关闭 按钮
						// 3. 并将 button 按钮用 jQuery 的 on() 方法动态绑定一个点击chacha事件
					$(liNode).html(`
						<a class="nav-link active" id="pills-${name}-tab" 
							data-toggle="pill" href="#pills-${name}" role="tab" 
							aria-controls="pills-${name}" aria-selected="true" style="padding-right: 10px;">
							${titleName}&nbsp;
							<button type="button" class="chacha btn btn-raised btn-light btn-min-width mr-0 mb-0 ">
								<i class="fa ft-x"></i>
							</button>
						</a>
					`);

					// 对按钮绑定自定义的 chacha 关闭触发的事件;
					$(liNode).find('button[type="button"]').on('click', chacha);

					// 对 li 节点绑定一个点击更换网址栏 尾部 hash 的事件
					$(liNode).on('click', function() {
							window.document.location.hash = '/' + this.id;
						});

						// 应为前面已经判断过存在过的情况了，所以这里直接
						// 将新创建的 li 标签添加至标题栏 ul 尾部
					$(biaoqian).append(liNode);
				}
				// 调用上面的方法进行创建新的标题
				newLiBiaoTi.call(this);
				// -------------- 连锁效应 -> 创建新的 标题 li 节点【↑结束】 --------------

				// -------------- 初始化中间内容区 并连锁面包削的区域【↓开始】 --------------
				// 创建 面包削 div 和 划分内容区 的模板字符串
				let divNode = $(`
				<div class="show active tab-pane fade animated fadeIn" id="pills-${name}" role="tabpanel" aria-labelledby="pills-${name}-tab" data-name=${name}>
					<div class="container-fluid  pt-2 ">
						
						<div class="row" data-html="${name}.html">
							<div class="col">
								<nav aria-label="breadcrumb">
									<ol class="breadcrumb">
										<li class="breadcrumb-item active" aria-current="page">
											<a href="JavaScript:;" class="mianbaoxue" bind="${name}">${titleName}</a>
										</li>
									</ol>
								</nav>
							</div>
						</div>
						
						<${name} data-id=${name}></${name}>
					</div>
				</div>
			`)[0];

				// 创建内容区主框架后，对面包削绑定一个方法，代表点击这个标签时，会移除后面对应的面包削
				$(divNode).find('.mianbaoxue').on('click', function() {
					$(this).removeMianbao();
				});

				// 因为是新增的页面所以需要清除正在显示的内容
				// 调用清除内容区样式的方法，去除中间内容区的 active 的div
				qingchu($('div.content-wrapper')[0]);

				// 最后将内容 tab-pane 对象添加在父类 content-wrapper 的尾部
				$('div.content-wrapper').append(divNode);

				// 调用切换显示网页 hash 的方法
				hash();

                // 获取映射中的对象, 如果 name 相等，则触发某些方法
                $.getMenuData(name).start($(divNode).find(name));

				// -------------- 初始化中间内容区 并连锁面包削的区域【↑结束】 --------------

                /**
				 * 清除所有内容显示的方法
                 * @param content 内容区的 div 节点
                 */
				function qingchu(content) {
					// 传入的内容区 div 节点，寻找节点下 div 为 .active 类样式的节点
					// 遍历进行移除 show active 类样式
					$(content).children('div.active').each(function() {
						$(this).removeClass('show active');
					});
				}

                /**
                 * 标签绑定的叉叉按钮 事件
                 * @param {Object} this1 this 自身传过来了
                 */
                function chacha() {
                    // 情况1：当点击叉的标签不在显示时候，则直接关闭相关的内容和导航
                    // 情况2：点击的正在显示，位置不在最后一个，则关闭自身相关后，将显示设置为尾部导航
                    // 情况3：如果自身显示，并且又在最后一个位置，则关闭自身后将前一个导航设置为显示

                    // 找到绑定的 li 标签
                    let biaoQian = $(this).closest('li')[0];
                    let aNode = $(this).closest('a')[0];

                    // 根据绑定的 li 自定义属性 找到对应的内容 div
                    let id = aNode.getAttribute('aria-controls');
                    let neiRong = $('#' + id)[0];

                    // 如果不是自身节点显示，则直接移除点击的标签
                    let isBoo = $(aNode).hasClass('active');
                    if (!isBoo) {
                        $(biaoQian).remove();
                        $(neiRong).remove();
                        return false;
                    }

                    // 如果点击的不是最后一个节点，并且自身显示
                    // 则将显示赋予给尾部，将自身移除
                    if ($(biaoQian).next().length > 0) {
                        // 判断自身是不是显示的节点
                        // console.log('2')

                        // 将找到兄弟节点的最后一个
                        let node;
                        let temp = $(biaoQian);
                        do {
                            node = temp[0];
                            temp = $(temp).next();
                            console.log(temp[0])
                        } while (temp[0]);

                        // 先将 最后的节点置为 active，然后将需要移除的标签移除掉
                        console.log(node);
                        $(node).children().addClass('active');
                        $(biaoQian).remove();
                        $(neiRong).remove();

                        // 最后获取要最后节点绑定的 内容 div 赋予 show active 类样式
                        aNode = $(node).children()[0];
                        id = aNode.getAttribute('aria-controls')
                        neiRong = $('#' + id)[0];
                        $(neiRong).addClass('show active');

                        // 如果是最后一个节点 并且自身显示
                        // 则将自身移除并把前一个节点置为显示
                    } else {
                        // 找到标签的上一个节点里的 a 标签然后赋予 active 类样式，回退两次回到自身 remove 移除掉
                        $(biaoQian).prev().children().addClass('active').end().end().remove();
                        // 找到自身标签的上一个内容 赋予 'show active' 类样式，在回退将自身移除
                        $(neiRong).prev().addClass('show active').end().remove();
                    }

                    // 在 active 是自己时chacha 切换锚记
                    hash();

                    // 移除过后根据当前显示的导航栏，将菜单栏进行更新
                    $(getShowMenu()).removeClass('active');
                    let name = getShowNav().id;
                    $('a[data-aname="'+name+'"]').closest('li').addClass('active');

                }
			});
			
			/**
			 * 切换 window 网页 href 上的尾部 hash 锚记
			 */
			function hash(){
				// 获取到中间正在显示的内容面板的节点 content-wrapper
				let div = getShowPane();
				// 获取对应的 data-name 自定义属性
				let dataName = div.getAttribute('data-name');
				// 将自定义属性的内容设置为网址 hash 锚记上
				window.document.location.hash = dataName;
			}
		})
	}
);

// 面包削的增删改的封装匿名函数
(function MianBao(addMianbao, removeMianbao, returnMianbao) {

	$.prototype.addMianbao = addMianbao;
	$.prototype.removeMianbao = removeMianbao;
	$.prototype.returnMianbao = returnMianbao;

})(
    /**
	 * 用来统一对面剥削添加界面的方法 默认 get 方式请求
     * @param htmlName 请求的地址
     * @param title 面包学显示的名称
     * @param data 数据 或者 方法，方法会提供两个参数，1-指定html注入的节点 2-填写的请求地址
     */
	function addMianbao(htmlName, title, data) {
        data = data || {};

        // 对 value 变量类型进行筛选判断
        let type = typeof data;

		// 将显示的面板都设置为 none 的显示
        $($(getShowPane()).attr('data-name')).css({display : 'none'});

		// 思路分析
		// 1. 获取当前显示的内容区数据里的面包削
		let divNode = $('.content-wrapper>div.show')[0];
		let containerFluid = $(divNode).find('div.container-fluid')[0];

        // 简单的标识名格式判断，存在 html 则截取，否则就直接使用
        let aName = "";
        if(htmlName.indexOf('.html') === -1){
            aName = htmlName.toString();
		}else{
            aName = htmlName.toString().substring(0, htmlName.toString().indexOf('.html'));
		}

		// 2. 获取到面包削 div 中当先显示的 li 节点,将显示的 li 节点移除掉
		let liNode = $(divNode).find('.mianbaoxue').closest('li.active');
		liNode.removeClass('active');

		// 3. 在它下面添加一个面包削
		let newLiNide = $(`<li class="breadcrumb-item active"><a class="mianbaoxue" href="JavaScript:;">${title}</a></li>`);
		// 4. 添加在兄弟节点下面
		$(liNode).closest('ol').append(newLiNide);
		
		// 添加 removeMIbaobao 的监听器
		newLiNide.find('a').on('click', function() {
			$(this).removeMianbao();
		});

		// 将对应的中间内容区的显示设为 none
		let dataName = divNode.getAttribute('data-name');
		$($(dataName)[0]).css('display', 'none');

        // 在面包削上的 a 标签绑定对应的 新名称
        $(newLiNide).find('a')[0].setAttribute('bind', aName);

        // 1. 获取到当前中间显示内容的 div 的自定义 data-name 属性
        let name = $(getShowPane()).attr('data-name');

        // 2. 将 html 添加在新节点上，在添加在父节点尾部
        let newDivNode = $(`<${name}></${name}>`);

        // 如果是 object 类型则认为是 get 方式注入
        if(type === 'function'){
        	// 调取他的方法 并将需要注入的节点给他
            data(newDivNode,htmlName);
        }else if(type === 'object'){
			// 获取跳转页面的信息
            // 父节点
            $.get(htmlName,data, function(html) {
                // 将 html 得到的界面注入进去
                newDivNode.html(html);
            });
        }else{
            throw new error("【 "+data + " 】addMianbao 传入的第三个参数 value 只能是 function 和 object 类型，function 为回调函数 object 传入的数据");
        }

        // 设置自定义名称
        $(newDivNode).attr('data-id', aName);
        // 添加到指定位置
        $(containerFluid).append(newDivNode);

	},
	function removeMianbao() {
		// 获取当先面包绑定的 bind 的 hash 字符串
		let hash = $(this).attr('bind');
		window.document.location.hash = '/' + hash;

		// 向上找到 li 的标签
		let liNode = $(this).closest('li');
		// 获取面包削上绑定的 字符串
		let liNodeBind = liNode.find('a').attr('bind');

		// 获得显示内容主面板的 data-name;
		let dataName = $(getShowPane()).attr('data-name');

		// console.log($(dataName + '.' + liNodeBind));

		// 循环判断该面包削后面的节点个数，并依次进行相关的移除，直到该面包削后面没有任何兄弟节点
		while ($(liNode).next().length > 0) {
			// 获取到要删除的 li 节点里的 a 标签绑定的内容 div 找到删除掉
			let bind = $($(liNode).next()[0]).find('a').attr('bind');
			// 拼接内容区的 div 选择器找到并清除掉
			$(dataName + '[data-id=' + bind + ']').remove();
			// 点击面包削的下一个节点清楚掉
			$(liNode).next()[0].remove();
		}

		// 将点击的节点 li 进行添加为 显示 标记
		$(liNode).addClass('active');
		// 并将相关的页面也设置为显示的块级样式
		$(dataName + '[data-id=' + liNodeBind + ']').css('display', 'block');
	},
	function returnMianbao(fun) {
		// 思路分析
		// 获取到当前显示的面包削上一个节点并清除自己
		let result = $(this).closest(`${getHash()}`)[0];
		$(this).removeMianbao.call($(getShowMianBao()).prev()[0]);
		
		return result;
	}
);